<!DOCTYPE html>
<html>
<script src="../../../../resources/js-test.js"></script>
<link rel="stylesheet" href="../resources/touch-hover-active-tests.css">
<style type="text/css">
#box {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 200px;
    height: 200px;
}
#frame {
    position: absolute;
    left: 210px;
    top: 10px;
    height: 200px;
    width: 200px;
}
</style>
<body>
<div id='box' class='touch-interactive'>Gestures go here</div>
<iframe src='resources/gesture-tap-active-state-iframe-inner.html' id='frame'>
</iframe>

<p id="description"></p>
<div id="console"></div>

<script src="../resources/touch-hover-active-tests.js"></script>
<script>
description("Tests that the hover effect is cleared by a gesture tap between iframe and document");
var box1;
var box2;
var testNum = 0;
function doGesture(element, base)
{
    var center = elementCenter(element);
    var x = base.x + center.x;
    var y = base.y + center.y;
    eventSender.gestureTapDown(x, y);
    eventSender.gestureShowPress(x, y);
    eventSender.gestureTap(x, y);
}

function runTests()
{
    if (!window.eventSender) {
        debug('This test requires DRT.');
        return;
    }
    internals.setIsCursorVisible(document, false);

    box1 = document.getElementById('box');
    var frame = document.getElementById('frame');
    box2 = frame.contentDocument.getElementById('box');

    debug('Verify the hover is not initially set');
    shouldBeDefault('getHoverActiveState(box1)');
    shouldBeDefault('getHoverActiveState(box2)');

    nextTest();
}

function nextTest()
{
    if (testNum == 0) {
        debug('Verify the hover effect is set in iframe');
        doGesture(box2, {x: frame.offsetLeft, y: frame.offsetTop});
        setTimeout(waitUntilActiveCleared, 1);
    } else if (testNum == 1) {
        debug('Verify the hover effect is cleared in iframe');
        doGesture(box1, {x: 0, y: 0});
        setTimeout(waitUntilActiveCleared, 1);
    }
    else {
        finishJSTest();
        return;
    }
}

// The active timer makes this impossible to test without polling.
// Because there is no way to detect the time when the hover/active is changed.
function waitUntilActiveCleared()
{
    if (testNum == 0) {
        if(getHoverActiveState(box2) == 'hoveredAndActive') {
            return setTimeout(waitUntilActiveCleared, 10);
        }
        shouldBeDefault('getHoverActiveState(box1)');
        shouldBeOnlyHovered('getHoverActiveState(box2)');
    } else if (testNum == 1) {
        if(getHoverActiveState(box1) == 'hoveredAndActive') {
            return setTimeout(waitUntilActiveCleared, 10);
        }
        shouldBeOnlyHovered('getHoverActiveState(box1)');
        shouldBeDefault('getHoverActiveState(box2)');
    }
    ++testNum;
    nextTest();
}

if (window.testRunner) {
    window.jsTestIsAsync = true;
    testRunner.waitUntilDone();
}

window.onload = runTests;
</script>
</body>
</html>